ספר הבישול של דפי הסגנון
הקדמה | פאנלים צדדיים | קישורים | טקסט | ניווט | דמויות | נקודות ציון
מראות מיוחדים של טקסטים בעזרת CSS
מתכון זה הוא יותר אוסף של מתכונים, כדי לעזור לתת לכם מספר רעיונות כיצד ליצור את מראה הטקסט בדפים שלכם בעזרת דף הסגנון.
- רוצים שכל הקוד בדפים יופיע בפונט מיוחד.
- רוצים ליצור "pull-quotes" בתוך קופסאות על דפי האתר שלנו, אולי עם צבע רקע מסויים וגבול מסביב לקופסא.
- רוצים שהכותרות שלנו באמת יבלטו.
הגדרה של פונטים מיוחדים
בעזרת דפי הסגנון זה קל להגדיר קבוצות של פונטים שאותן יחפש הדפדפן כאשר מציירים אלמנט מסויים בדף האתר. הדוגמא שבה נשתמש כאן קשורה לדפים האמיתיים הללו, שבהם צופים כעת. נראה לכם כיצד גורם לכל דוגמאות הקוד שלנו להופיע בפונט מסויים.
ב-HTML:
חלק זה הוא באמת קל כיוון שהבורר שבו אתם משתמשים, CODE, הוא מה שמכונה בורר של HTML בסיסי. לרוב עורכי WYSIWIG יש, ככל הנראה, פריט תפריט המאפשר לך לסמן טקסט כקוד, אך במקרה ואתם עושים זאת ידנית, הוא צריך להיראות כך
<code>sample code</code>
אז הדבר הראשון שעליכם לעשות, אולי בכלל בזמן שאתם כותבים את המסמך, או אולי עם מסמך שנכתב לפני כן, אם רק גיליתם את נפלאות הסימון המבני (structural markup), לעומת סימון התצוגה (presentational markup).
בדף הסגנון שלכם:
כפי שיודעים, לא נוכולים להגדיר פונט שאותו רוצים בדוגמאות הקוד שלכנו, שיצוייר ורק תצפו אחר כך שפונט זה תמיד יהיה בשימוש. ואולם, עם דף סגנון נוכל להגדיר סדרה של פונטים מקובלים, בסדר עדיפות, שהדפדפן יעבוד עד שימצא פונט שהוא גם על הלקוח.
וכעת לדוגמת ה-CODE; דף הסגנון נראה כך
CODE {font-family: Courier, "Courier New", Monotype.com, monospace}
הבורר הוא "CODE", המאפיין הוא "font-family" והערך הוא "Courier, "Courier New", Monotype.com, monospace". שימו לב שהמרחאות של "Courier New" הן חשובות בשל הרווח שבין שתי המילים שבשם.
נבחר בערך זה כיוון ש
- Courier הוא באמת הפונט שבו נרוצה שהקוד יופיע.
- Courier New הוא גירסת ה-Courier הנפוצה יותר בבמת החלונות (windows platform).
- Monotype.com הוא "web font" דומה ל-Courier, המותקן באופן שכיח בדפדפנים העיקריים.
- Monospace הוא "font family (משפחת הפונטים)" שאליה Courier שייך. זה אומר לדפדפן "אם אינך יכול למצוא את הקודמים, לפחות תשתמש בפונט מתוך המשפחה הזו." מאוד מומלץ שתרכשו את ההרגל לשים את משפחת הפונט בסוף רשימת הפונטים שלכם.
שימו לב, אלה מכם שבאמת מקשיבים בנקודה זו יצעקו, אך זהו רק הפונט! מה לגבי ההפנמה והקופסא הצבעונית המופיעה מסביב לדוגמאות הקוד בדף הזה? ובכן, בחרתי שלא לחזור כאן על הסברים לגבי מאפיינים אחרים, שתמצאו במקומות אחרים בספר הבישול.
יצירת pull-quotes
"כדי באמת להבין את דפי הסגנון עליכם להבין את ההבדלים בין סימון מבני ובין סימון תצוגה"
מתכון קטן זה יראה לכם כיצד ליצור pull quotes שנראים כמו זה שלמעלה. Pull quotes הם יעילים עבור שבירה של גושי טקסט ארוכים ומשיכת תשומת הלב של הקוראים לרעיונות חשובים. באופן נפוץ, pull quote יופיע בפונט גדול יותר מגוף הטקסט העיקרי ולעיתים קרובות יופיע גם בנטייה (italic). בדוגמא, נתנו גם צבע רקע וגבול כמו גם הפנמה לכל הדבר ויישור לימין של הטקסט.
ב-HTML שלכם:
הדבר הראשון שאומר כאן הוא לא לסמן את ה- pull quotes שלכם כ- block-quotes.
לדפדפנים יש את ההגיון שלהם לגבי כיצד יופיע הטקסט המסומן בבורר ה-HTML הפשוט BLOCKQUOTE, שעלול להתנגש עם מה שברצונכם לעשות. בתיאוריה, דף הסגנון שלכם עלול לבטל זאת, אך למעשה זה פשוט לא עובד בדרך זו, וקרוב לוודאי שגם לא יעבוד בצורה זו בעתיד הקרוב. בזמן שאולי תחסכו לכם מעט זמן בשלב הסימון, תצרו לעצמכם כאב ראש, כאשר הדבר מגיע לנסיון שלכם לגרום ל-pull quotes שלכם להיראות כפי שאתם רוצים שייראו בדפדפנים השונים.
במקום זאת, עליכם לסמן את ה- pull quotes שלכם כפסקאות של מעמד "pullquote", כך
<p class="pullquote">Don't mark your pull-quotes up as block-quotes</p>
לכן עברו על המסמך שלכם ותסמנו את כל הטקסט שאותו אתם רוצים שיופיע כ-pull-quote כך.
בדף הסגנון שלכם:
עליכם קודם כל ליצור בורר שיבחר את כל הפסקאות ממעמד "pullquote", ואז אתם יכולים לתת את המאפיינים לבורר זה כך שה-pull quotes שלכם יופיעו כפי שאתם רוצים.
הבורר נראה כך
P.pullquote
וכאן יש אותו הבורר עם כל המאפיינים שאתם צריכים כדי שייראה כמו ה-pull quote שלמעלה.
P.pullquote {background-color: #7f034c;
color: #ffffff;
padding: 5%;
font-style: italic;
font-size: 1.5em;
border: medium black solid;
margin-left: 10%;
margin-right: 10%;}
צבע רקע
מאפיין זה קובע את הצבע המופיע בקופסא מסביב ל-pull quote. "#7f034c" הוא ערך הצבע ההקסדצימלי. בדקו במדריך ה-CSS עבור ערכי צבע שבהם אתם יכולים להשתמש.
צבע
זה קובע את הצבע של הטקסט האמיתי של ה-pull-quote. "#ffffff" הוא ערך הצבע ההקסדצימלי עבור צבע "white (לבן)". בדקו במדריך ה-CSS עבור ערכי צבע שבהם אתם יכולים להשתמש.
ריפוד (padding)
זה קובע כמה יותר גדולה הקופסא הצבעונית מאשר הטקסט האמיתי שמוכל בה. בדוגמא שלי כאן ריפוד של 15% נקבע עבור כל צד של הקופסא. אם ברצונכם להיות ססגוניים, אתם יכולים לקבוע ריפוד שונה עבור כל צדדי הקופסא השונים, באופן אינדיבידואלי. למשל
אם אנו קובעים את הריפוד, כפי שמוצג למטה, ה-pull quotes שלנו ייראו כך, עם יותר רווח מעל ומתחת לטקסט ופחות רווח בין שמאל וימין.
P.pullquote {padding-bottom: 10%;
padding-left: 5%;
padding-right: 5%;
padding-top: 10%;}
שימו לב שקובעים את הריפוד כאחוז. זה מציין שהריפוד שבו משתמשים אמור להיות אחוז הרוחב של האלמנט. זה נכון גם עבור הריפוד האופקי והריפוד האנכי. למה אנו משתמשים באחוזים, ולא בסכום קבוע, בוא נאמר, 10 פיקסלים? אם משתמשים בסכום קבוע, כאשר החלון מקבל גודל חדש, או שהמשתמש מגדיל את גודל הטקסט, הריפוד לא יתאים לפרופורציות החדשות. בעזרת שימוש במדד יחסי, כמו אחוזים, העמודים שלכם יתאימו עצמם לבחירה שבה המשתמש בחר לקרוא אותם בעזרתה.
font-style (סגנון פונט)
זה קובע כי הטקסט יופיע בנטייה. אם תרצו גם שהטקסט יופיע עם קו הדגשה, תצטרכו חלק נוסף של קוד כמו זה
P.pullquote {text-decoration: underline}
font-size
זה גורם לפונט להיראות יותר גדול מאשר איך שהוא מופיע בשאר הדף. שוב, כמו עם הצבע, אינכם יכולים לשים כל מה שעולה בדעתכם כאן כערך עבור גודל הפונט. בדק במדריך ה-CSS שלנו עבור יותר פרטים אודות ערכיי גודל הפונט שבהם אתם יכולים להשתמש.
אתם יכולים לעשות מספר דברים די מתוחכמים עם גודל הפונטים בעזרת דפי הסגנון, אך אתם צריכים באמת מידה של הבנה לגבי כיצד דפי הסגנון פועלים באמת, במיוחד המושג של "ירושה". בספר הבישול אני נצמדתי לדוגמאות מאוד פשוטות, כמו זו, אך שוב, בדקו בספר הבישול של ה-CSS אם ברצונכם לדעת כיצד גודל הפונט פועל באמת וכיצד להשתמש בו.
ציינו את גודל הפונט בשימוש ביחידות em. אולי אתם תוהים מה היא יחידת em? בטיפוגרפיה המסורתית, 1em היה הגודל של הא M. בדפי הסגנון אם אתם מציינים את גודל הפונט ב-ems, גודל הפונט יהיה הכפולה הזו של גודל הפונט של אלמנט ההורה. במקרה שלנו, קבענו את הגודל ל-1.5em. פירושו של דבר, שטקסט ה-pull quote שלנו יהיה פי 1.5 מהגודל של טקסט הגוף (מכיוון שפיסקת ה-pull quote מוכלת בתוך הגוף). מהו הערך של זה? ובכן, הגודל של ה-M משתנה בהתאם לבחירה של המשתמש. אם המשתמש בוחר בגודל פונט גדול, כעדיפות שלו לעבור על דפי האתר, אזי ה-pull quote יותאם בגודלו למעלה כדי לשמור על אותן הפרופורציות. אם המשתמש בוחר בגודל פונט קטן יותר עבור גוף הדפים שלו, גודל הטקסט של ה-pull quote יצומצם, שוב, שומר על פרופורציות.
גבול
בדוגמא הזאת הגדרתנו שלושה היבטים של רוחב הגבול
- width. . ערך הרוחב שבו השתמשנו הוא "medium", " ושני ערכים אפשריים אחרים שאולי תרצו להתנסות בהם, הם "thick (עבה)" ו"thin (דק)". על דיון מלא בנושא ערכים שאתם יכולים לתת לגבולות, בדקו במדריך ה-CSS.
- color.ערך הצבע שבו השתמשנו הוא "black (שחור)" עבור דיון מלא בנושא ערכיי הצבע האפשריים בדקו במדריך ה-CSS.
- style. הסגנון שהשתמשנו בו הוא "solid". ". סגנונות גבול אחרים שאיתם תרצו, אולי לשחק, הם מנוקד (doted), מופרד (dashed), קו כפול, groove, רכס (ridge), תוספת (inset), הוצאה (outset).
הבלטת הכותרות שלכם
מזמן שאנו כולנו משתמשים ב-bandwidth heavy gifs כדי ליצור כותרות מקושטות, מכיוון שלא יכולתם ליצור שום דבר עם הרבה "פלפל", כשעל מה שיכולתם להגדיר היה הפונט וגודלו ומאפיינים פשוטים אחרים. ובכן, נקווה שדפי הסגנון יוכלו לשנות את זה עבורכם, והם יעשו זאת בדרך שבה שינוי ועדכון של הדפים שלכם, בעתיד, ייעשה במהירות. ומה גם, שכותרות הן דרך מצויינת להתרגל לסימון עפ"י מבנה יותר מאשר עפ"י מראה.
ב-HTML שלכם:
רוב עורכי HTML מאפשרים לכם לסמן בקלות את הכותרות במסמך שלכם. ודאו שאתם נפטרים מכל תוויות המראה.
בדפי הסגנון :
אנו צריכים לבחור כותרות בדפי הסגנון שלכם ואז ליישם אלו מאפיינים שאותם אתם רוצים להבחין בין כותרות, גם מן הטקסט העיקרי וגם מרמות כותרת אחרות.
קיימות דרכים רבות שבהן ניתן להבליט את הכותרות שלכם. באופן כללי, גודל הטקסט גדל. כאן, אנו משנים את צבע הטקסט, כך שצבע הרקע של הדף משמש עבור צבע הטקסט של הכותרת, בזמן שהרקע של הכותרת מותאם לצבע הטקסט של הכותרת. אתם יכולים גם לעשות כותרות מופנמות או ההפנמה שלהן (כך שצד שמאל של טקסט הכותרת הוא יותר שמאלה או ימינה מן הטקסט בפיסקאות). אתם יכולים גם ליישר את טקסט הכותרת לצד ימין או למרכז את הטקסט של הכותרת.
רעיון אחד הוא שיהיה סגנון אחיד לכל הכותרות ללא הבדל ברמה, ואז להבדיל בין רמות שונות עפ"י גודל הטקסט, ואולי עפ"י הפנמה.
כדי ליצור בורר שיבחר בו זמנית את כל הכותרות, אנו יכולים להשתמש בבורר קבוצה. זה פשוט עושה רשימה של כל הבוררים הרצויים המופרדים ע"י פסיק.
כדי לבחור כל ותרת ללא קשר לרמה שאנו משתמשים בבורר
H1, H2, H3, H4, H5, H6
אז אנו יכולים ליישם את המאפיינים המשותפים לבורר זה, ולהשתמש בבוררים אינדיבידואלים עבור המאפיינים של רמות יחידות של כותרת.
הגדלה של גודל טקסט
כבר ראינו כיצד לשנות את גודל הטקסט, בעזרת font-size property (מאפיין גודל הפונט), בזמן שבחנו את ה-pull-quotes.
שינוי כיוון הטקסט וצבע הרקע
ראינו כבר מספר פעמים כיצד לקבוע את הצבע של אלמנט מסויים, כמו גם את צבע הרקע בספר בישול זה. כבר צריכים לדעת את זה!
הפנמה והחצנה של טקסט
השימוש בהפנמה אמור להיות לכם מוכר מהרבה פרסומים המתבססיםעל עבודות, כדי להבדיל בין כותרת לטקסט העיקרי. קיימות מספר דרכים להשיג זאת בדפי סגנון. אולי הדרך המתאימה ביותר היא להשתמש בשוליים, די להפנים את כל הכותרות ברמה מסויימת מעבר לקצה השמאלי של הטקסט העיקרי, פשוט תצרו שוליים שמאלים. ניתן לציין שוליים בעזרת ערכיי פיקסל, אך הבה ונבדוק כאן עוד דרך לציון ערכי שוליים.
רבים מן הערכים בדפי הסגנון יכולים להיות מצויינים בעזרת אחוזים. לדוגמא, ניתן לציין גודל טקסט בדרך הבאה
H1 {font-size: 120%}
זה אומר שכותרות מרמה 1 אמורות להיות מוצגות פי 1.2 מגודל הטקסט של הורה הכותרת. בדרך כלל, זה יהיה הגוף. כך שאם גוף הטקסט מוצג כ-12pt, הכותרות מרמה 1 אמורות להיות מוצגות כ 14.4=12X1.2 נקודות (שכנראה יעוגל למטה ל-14 נקודות). אתם יכולים גם להשתמש ב-ems, כפי שראינו קודם. 1.2em הוא שווה ערך ל-120%.
של גודל הטקסט, אזי אתם מאלצים את המשתמשים לקרוא טקסט בגודל הרצוי לכם, ולא זה הרצוי להם. אם לא תשתמשו בגדלים אבסולוטיים, כמו נקודות או פיקסלים, הם יוכלו לבחור את גודל הפונט הרצוי להם כגודל הבסיסי לדפים שלהם. נניח והם יכולים לקרוא טוב מאוד, או שיש להם מוניטור בעל רזולוציה גבוהה מאוד. הקורא יכול להעדיף גודל פונט של 18pt. אם עשינו חיבור קשיח (hardwire) לכותרות מרמה 1 שלנו כ-14pt, אזי הכותרות שלנו מרמה 1 יהיו קטנות יותר מן הטקסט העיקרי! ע"י ציון כאחוז, הכותרות שלנו מרמה 1 תמיד ישמרו על היחס שלהם של 120% מגודל טקסט הגוף. הבה ניישם הגיון זה על השוליים. אתם יכולים לציין שוליים שמאליים של 20 פיקסלים. לכם זה יכול להיראות "נכון" על מוניטור בעל רזולוציה של 800 עד 600, עם חלונות הממלאים את כל המסך.
כיצד ייראו שוליים של 20px במערכות הפעלה ידניות; או על מוניטורים בעלי רזולוציה סופר גבוהה עם חלונות הממלאים את כל המסך? למה לא לבחור באחוז? כך, הדף שלכם יותאם לרזולוציית המסך ולגודל החלון. כדי ליצור שוליים שמאליים לכותרות מרמה 1 של, בוא נאמר, 10%, השתמשו בכלל הבא
H1 {margin-left: 10%}
כך נוכל להבדיל בין רמות כותרת שונות ע"י הפנמה רבה יותר שלהן.
יישור טקסט
זה לא נדיר עבור כותרות להסתדר במרכז או אפילו לימין. כדי ליישר את הטקסט של כותרות, או של כל אלמנט אחר, אנו משתמשים במאפיין יישור הטקסט (text-align). לדוגמא, כדי ליישר לימין (right justify) טקסט של כותרות מרמה 2, השתמשו בהצהרה
H2 {text-align: right}
במתכון זה ראינו מספר מאפיינים חשובים וגם העפנו מבט ברעיון החשוב של יצירת דפים המתאימים למסגרת המשתמש. זהו שיעור שננסה לתגבר בשאר המתכונים שלנו.
הקדמה | פאנלים צדדיים | קישורים | טקסט | ניווט | דמויות | נקודות ציון
|
